<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒模型</title>
        <style>
            .a {
                /*width: 200px;*/
                height: 200px;
                background: red;
                /* 上内填充 */
                /*padding-top: 20px;*/
                /* 左内填充 */
                /*padding-left: 20px;*/
                /* 下内填充 */
                /*padding-bottom: 20px;*/
                /* 右内填充 */
                /*padding-right: 30px;*/
                
                /* 上下左右 */
                padding: 50px;
                
                /* 上下 左右 */
                /*padding: 50px 20px;*/

                /* 上 左右 下 */
                /*padding: 50px 20px 10px;*/
                
                /* 上 又 下 左 */
                /*padding: 10px 20px 30px 40px;*/

                /*border: 5px solid black;*/

                /* 上border */
                /*border-top-width: 10px;
                border-top-color: yellow;
                border-top-style: solid;*/

                /*border-top: 10px solid yellow;

                border-left: 20px dotted black;

                border-right: 30px solid blue;*/

                /*border-bottom: 40px solid cyan;*/

                border: 10px solid black;

                border-bottom: none;

                /*margin-left: 10px;
                margin-bottom: 20px;
                margin-right: 30px;
                margin-top: 50px;
*/
                /*margin: 50px 20px 10px;*/
                /*margin: 50px auto 0;*/
                margin: 50px 100px 50px;
                width: auto;
            }

            .b {
                width: 200px;
                height: 300px;
                background: blue;
                margin-top: 100px;
            }
            
            /* 相邻的上下margin会重叠, 左右不会重叠 */
            a {
                margin: 0 20px;
            }

            .box {
                width: 400px;
                /*height: 380px;*/
                height: 400px;
                /*border-top: 2px solid orange;*/
                background: orange;
                overflow: hidden;

            }

            .in {
                width: 100px;
                height: 600px;
                background: red;
                margin-top: 20px;
            }

        </style>
    </head>
    <body>

        <!-- 盒子模型 -->
        <div class="a">
            你好
        </div>

        <div class="b"></div>

        <a href="">你好</a><a href="">hello</a>

        <div class="box">
            <div class="in"></div>
        </div>
        
    </body>
</html>